<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#bt{
				height: 50px;
				width: 100px;
				margin: 20px 20px;
			}
		</style>
	</head>
	<body>
		<div>
			<button id="bt" type="button" onclick="doAction(event);">抽奖</button>
			<table cellpadding="20px" cellspacing="0" border="1px" bgcolor="#b2ffff">
				<tr>
					<td id="jp1">1</td>
					<td id="jp2">2</td>
					<td id="jp3">3</td>
					<td id="jp4">4</td>
					<td id="jp5">5</td>
					<td id="jp6">6</td>
					<td id="jp7">7</td>
					<td id="jp8">8</td>
					<td id="jp9">9</td>
					<td id="jp10">10</td>
				</tr>
				<tr>
					<td id="jp11">11</td>
					<td id="jp12">12</td>
					<td id="jp13">13</td>
					<td id="jp14">14</td>
					<td id="jp15">15</td>
					<td id="jp16">16</td>
					<td id="jp17">17</td>
					<td id="jp18">18</td>
					<td id="jp19">19</td>
					<td id="jp20">20</td>
				</tr>
				<tr>
					<td id="jp21">21</td>
					<td id="jp22">22</td>
					<td id="jp23">23</td>
					<td id="jp24">24</td>
					<td id="jp25">25</td>
					<td id="jp26">26</td>
					<td id="jp27">27</td>
					<td id="jp28">28</td>
					<td id="jp29">29</td>
					<td id="jp30">30</td>
				</tr>
				<tr>
					<td id="jp31">31</td>
					<td id="jp32">32</td>
					<td id="jp33">33</td>
					<td id="jp34">34</td>
					<td id="jp35">35</td>
					<td id="jp36">36</td>
					<td id="jp37">37</td>
					<td id="jp38">38</td>
					<td id="jp39">39</td>
					<td id="jp40">40</td>
				</tr>
				<tr>
					<td id="jp41">41</td>
					<td id="jp42">42</td>
					<td id="jp43">43</td>
					<td id="jp44">44</td>
					<td id="jp45">45</td>
					<td id="jp46">46</td>
					<td id="jp47">47</td>
					<td id="jp48">48</td>
					<td id="jp49">49</td>
					<td id="jp50">50</td>
				</tr>
				<tr>
					<td id="jp51">51</td>
					<td id="jp52">52</td>
					<td id="jp53">53</td>
					<td id="jp54">54</td>
					<td id="jp55">55</td>
					<td id="jp56">56</td>
					<td id="jp57">57</td>
					<td id="jp58">58</td>
					<td id="jp59">59</td>
					<td id="jp60">60</td>
				</tr>
				<tr>
					<td id="jp61">61</td>
					<td id="jp62">62</td>
					<td id="jp63">63</td>
					<td id="jp64">64</td>
					<td id="jp65">65</td>
					<td id="jp66">66</td>
					<td id="jp67">67</td>
					<td id="jp68">68</td>
					<td id="jp69">69</td>
					<td id="jp70">70</td>
				</tr>
				<tr>
					<td id="jp71">71</td>
					<td id="jp72">72</td>
					<td id="jp73">73</td>
					<td id="jp74">74</td>
					<td id="jp75">75</td>
					<td id="jp76">76</td>
					<td id="jp77">77</td>
					<td id="jp78">78</td>
					<td id="jp79">79</td>
					<td id="jp80">80</td>
				</tr>
				<tr>
					<td id="jp81">81</td>
					<td id="jp82">82</td>
					<td id="jp83">83</td>
					<td id="jp84">84</td>
					<td id="jp85">85</td>
					<td id="jp86">86</td>
					<td id="jp87">87</td>
					<td id="jp88">88</td>
					<td id="jp89">89</td>
					<td id="jp90">90</td>
				</tr>
				<tr>
					<td id="jp91">91</td>
					<td id="jp92">92</td>
					<td id="jp93">93</td>
					<td id="jp94">94</td>
					<td id="jp95">95</td>
					<td id="jp96">96</td>
					<td id="jp97">97</td>
					<td id="jp98">98</td>
					<td id="jp99">99</td>
					<td id="jp100">100</td>
				</tr>
				
			</table>
		</div>
	</body>
	
	<script type="text/javascript">
		function doAction(event){
			event.target.innerText = "抽奖中···";
			var num = 0;
			var doActions = setInterval(function(){
				var tds = document.getElementsByTagName('td');
				for (var i = 0; i < tds.length; i++) {
					tds[i].style.backgroundColor = '#b2ffff';
				}
				var randNum = getRandValidNum();
				console.log('公布抽奖结果：'+randNum);
				document.getElementById('jp'+randNum).style.backgroundColor = 'red';
				num ++;
				if (num > 500){
					clearInterval(doActions);
					event.target.innerText = '重新抽奖';
				}
			},1);
		}
		function getRandValidNum(){
			while (true){
				var randNum = Math.floor(Math.random()*100);
				if (randNum != 0) {
					return randNum;
				}
			}
		}
		
	</script>
</html>